<template>
    <div style="height: 100%;">
        <div class="simple">
            <img src="http://www.coloradmin.cn/html/colorapple/assets/img/user-13.jpg">
            <div class="simple-text">
                <div>
                    <span class="text-1">Sean Ngu</span><br>
                    <span class="text-2">Front end developer</span>
                </div>
            </div>
        </div>
        <div style="height: 42px; line-height: 42px; padding-left: 20px; background-color: #222222;">
            <span class="text-2">Navigation</span>
        </div>
        <el-menu unique-opened background-color="#222222" text-color="#aaa" active-text-color="#ffffff" class="my-menu">
            <el-submenu v-for="(list, index) in listData" :index="(index+1)+''" :key="index">
                <template slot="title">
                    <i :class="list.style"></i>
                    <span>{{list.title}}</span>
                </template>
                <el-menu-item v-for="(li, index2) in list.children" :key="index + '-' + index2" :index="(index+1) + '-' + (index2+1)">{{li}}</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                listData: [
                    {
                        title: 'Dashboard',
                        style: 'icon ion-ios-pulse plus-icon icon-common',
                        children: [
                            'Dashboard v1',
                            'Dashboard v2'
                        ]
                    },
                    {
                        title: 'Email',
                        style: 'icon ion-ios-mail email-icon icon-common',
                        children: [
                            'Inbox v1',
                            'Inbox v2',
                            'Compose',
                            'Detail'
                        ]
                    },
                    {
                        title: 'Bootstrap 4',
                        style: 'icon ion-ios-desktop icon-common desktop-icon',
                        children: []
                    },
                    {
                        title: 'UI Elements',
                        style: 'icon ion-ios-color-filter icon-common ui-icon',
                        children: [
                            'General',
                            'Typography',
                            'Tabs + Accordions',
                            'Unlimited Nav Tabs',
                            'Modal + Notification',
                            'Widget Boxes',
                            'Media Object',
                            'Buttons',
                            'Icons',
                            'Simple Line Icons',
                            'Ionicons',
                            'Tree View',
                            'Language Bar + Icon',
                            'Social Buttons',
                            'Intro JS'
                        ]
                    },
                    {
                        title: 'Form Stuff',
                        style: 'icon ion-ios-briefcase icon-common form-icon',
                        children: [
                            'Form Elements',
                            'Form Plugins',
                            'Form Slider + Switcher',
                            'Form Validation',
                            'Wizards',
                            'Wizards + Validation',
                            'WYSIWYG',
                            'X-Editable',
                            'Multiple File Upload',
                            'Summernote',
                            'Dropzone'
                        ]
                    },
                    {
                        title: 'Tables',
                        style: 'icon ion-md-grid icon-common table-icon',
                        children: [
                            'Basic Tables',
                            'Managed Tables'

                        ]
                    },
                    {
                        title: 'Chart',
                        style: 'icon ion-ios-stats icon-common chart-icon',
                        children: [
                            'Flot Chart',
                            'Morris Chart',
                            'Chart JS',
                            'd3 Chart'
                        ]
                    },
                    {
                        title: 'Front End',
                        style: 'icon ion-ios-infinite icon-common front-icon',
                        children: [
                            'One Page Parallax',
                            'Blog',
                            'Forum',
                            'E-Commerce'
                        ]
                    },
                    {
                        title: 'Email Template',
                        style: 'icon ion-ios-paper icon-common template-icon',
                        children: [
                            'System Template',
                            'Newsletter Template'
                        ]
                    },
                    {
                        title: 'Calendar',
                        style: 'icon ion-ios-calendar icon-common calendar-icon',
                        children: []
                    },
                    {
                        title: 'Map',
                        style: 'icon ion-ios-pin icon-common map-icon',
                        children: [
                            'Vector Map',
                            'Google Map'
                        ]
                    },
                    {
                        title: 'Gallery',
                        style: 'icon ion-ios-albums icon-common gallery-icon',
                        children: [
                            'Gallery v1',
                            'Gallery v2'
                        ]
                    },
                    {
                        title: 'Page Options',
                        style: 'icon ion-ios-settings icon-common setting-icon',
                        children: [
                            'Blank Page',
                            'Page with Footer',
                            'Page without Sidebar',
                            'Page with Right Sidebar',
                            'Page with Minified Sidebar',
                            'Page with Two Sidebar',
                            'Page with Line Icons',
                            'Page with Ionicons',
                            'Full Height Content',
                            'Page with Wide Sidebar',
                            'Page with Light Sidebar',
                            'Page with Mega Menu',
                            'Page with Top Menu',
                            'Page with Boxed Layout',
                            'Page with Mixed Menu',
                            'Boxed Layout with Mixed Menu',
                            'Page with Transparent Sidebar'
                        ]
                    },
                    {
                        title: 'Extra',
                        style: 'icon ion-ios-heart-empty icon-common heart-icon',
                        children: [
                            'Timeline',
                            'Coming Soon Page',
                            'Search Results',
                            'Invoice',
                            '404 Error Page',
                            'Profile Page'
                        ]
                    },
                    {
                        title: 'Login and Register',
                        style: 'icon ion-ios-contact icon-common login-icon',
                        children: [
                            'Login',
                            'Login v2',
                            'Login v3',
                            'Register v3'
                        ]
                    },
                    {
                        title: 'Version',
                        style: 'icon ion-ios-flower icon-common v-icon',
                        children: [
                            'HTML',
                            'AJAX',
                            'ANGULAR JS',
                            'ANGULAR JS 4',
                            'MATERIAL DESIGN',
                            'APPLE DESIGN'
                        ]
                    },
                    {
                        title: 'Helper',
                        style: 'icon ion-ios-medkit icon-common help-icon',
                        children: [
                            'Predefined CSS Classes'
                        ]
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .simple {
        height: 36px;
        padding: 20px;
        background-color: #111111;
    }
    .simple > img {
        height: 36px;
        width: 36px;
        -webkit-border-radius: 18px;
        -moz-border-radius: 18px;
        border-radius: 18px;
    }
    .simple-text {
        display: inline-block;
        height: 36px;
        padding-left: 10px;
    }
    .text-1 {
        font-size: 14px;
        color: #fff;
    }
    .text-2 {
        font-size: 10px;
        font-weight: 200;
        color: #888;
    }
    .my-menu {
        height: calc(100% - 118px);
        border-right: none;
        /*must set*/
        overflow: auto;
        /*get scrollbar not seen*/
        /*IE 10+*/
        -ms-overflow-style: none;
        /*Firefox*/
        overflow: -moz-scrollbars-none;
    }
    /*Chrome and Safari*/
    .my-menu::-webkit-scrollbar {
        display: none;
    }
    .email-icon {
        color: #ffffff;
        background-color: #007aff;
    }
    .icon-common {
        font-size: 24px;
        text-align: center;
        vertical-align: middle;
        height: 26px;
        line-height: 26px;
        width: 26px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        display: inline-block;
        margin-right: 10px;
    }
    .plus-icon {
        color: #ffffff;
        background-color: #007aff;
    }
    .desktop-icon {
        color: #000;
        background-color: #ffffff;
    }
    .ui-icon {
        color: #fff;
        background-color: #5856D6;
    }
    .form-icon {
        color: #fff;
        /*background color gradient*/
        background: linear-gradient(#d26ffd 0,#7237b8 100%);
        background: -webkit-linear-gradient(#d26ffd 0,#7237b8 100%);
        background: -ms-linear-gradient(#d26ffd 0,#7237b8 100%);
        background: -moz-linear-gradient(#d26ffd 0,#7237b8 100%);
    }
    .table-icon {
        color: #fff;
        background-color: #4CD964;
    }
    .chart-icon {
        color: white;
        background: linear-gradient(#f7b90c 0,#f68213 100%);
        background: -webkit-linear-gradient(#f7b90c 0,#f68213 100%);
        background: -ms-linear-gradient(#f7b90c 0,#f68213 100%);
        background: -moz-linear-gradient(#f7b90c 0,#f68213 100%);
    }
    .front-icon {
        color: #fff;
        background: linear-gradient(#05dfeb 0,#0a8cbd 100%);
        background: -webkit-linear-gradient(#05dfeb 0,#0a8cbd 100%);
        background: -ms-linear-gradient(#05dfeb 0,#0a8cbd 100%);
        background: -moz-linear-gradient(#05dfeb 0,#0a8cbd 100%);
    }
    .template-icon {
        color: #fff;
        background: linear-gradient(#05dfeb 0,#0a8cbd 100%);
        background: -webkit-linear-gradient(#05dfeb 0,#0a8cbd 100%);
        background: -ms-linear-gradient(#05dfeb 0,#0a8cbd 100%);
        background: -moz-linear-gradient(#05dfeb 0,#0a8cbd 100%);
    }
    .calendar-icon,.map-icon {
        color: #fff;
        background-color: #FF2D55;
    }
    .gallery-icon,.setting-icon,.heart-icon,.login-icon,.v-icon,.help-icon {
        color: #fff;
        background-color: #4e4e4e;
    }
</style>
